<template>
  <div class="topBox">
    <div class="L"><a href="index.html"><img :src="logo"/></a></div>
    <div class="C">
      <div class="saerchbox">
        <input name="" type="text" placeholder="请输入您要搜索的内容"><img src="/assets/images/ss.png">
      </div>
    </div>
    <div class="R">
      <a href="javascript:void()" @click="show=!show"><img src="/assets/images/tr.png" /></a>
    </div>
  </div>
  <div class="clear"></div>


  <!-- 轮播图 -->
  <div class="aui-m-slider">
    <van-swipe>
      <van-swipe-item v-for="(item,index) in Recommend">
        <img :src="item.cover_cdn" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="clear"></div>


  <!-- 商品分类 -->
  <div class="lqgwBox">
    <ul>
      <li v-for="(item,index) in Type">
        <router-link :to="{path:'/product/product/type',query:{typeid:item.id}}">
          <img :src="item.cover_cdn">
          <p>{{item.name}}</p>
        </router-link>
      </li>
    </ul>
  </div>
  <div class="clear"></div>


  <!-- 新品推荐 -->
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <ul class="proul">
    <li v-for="(item,index) in News">
      <div class="con">
        <router-link :to="{path:'/product/product/info', query:{proid: item.id}}">
          <img :src="item.cover_cdn">
          <p>
            <span>￥</span>
            {{item.price}}
          </p>
        </router-link>
      </div>
    </li>



  </ul>
  <div class="adBox">
    <img src="/assets/images/banner.jpg">
  </div>
  <div class="clear"></div>


  <!-- 热销产品 -->
  <div class="contitbox">
    <p>热销<span>•</span>单品</p>
  </div>
  <div class="clear"></div>
  <ul class="proul_2">
    <li v-for="(item,index) in Hot">
      <div class="con">
        <router-link :to="{path:'/product/product/info', query:{proid: item.id}}">
          <img :src="item.cover_cdn">
          <p>
            <span>￥</span>
            {{item.price}}
          </p>
        </router-link>
      </div>
    </li>

  </ul>

  <div class="h54"></div>

   <!-- 右侧弹出层 -->
  <van-popup v-model:show="show" position="right">
      <div class="type">
          <van-sidebar v-model="active" @change="SelectType">
              <van-sidebar-item v-for="item in Type" :title="item.name" />
          </van-sidebar>
      </div>
  </van-popup>

  
  <!--底部-->
  <menus></menus>
</template>

<script>
  //引入
  import menus from '@/components/common/menus.vue'

  export default {
    name: 'home',
    components: {
      menus
    },
    created() {
      // 请求前台数据
      this.ProductData()
    },
    data() {
      return {
        show: false,    //右侧弹出层
        Recommend: [],
        News: [],
        Hot: [],
        logo:'',    //logo
        Type: [],
        typelist: [],    //分类列表
        active: 0,       //右侧默认选中下标
        ShowType: false,
      }
    },
    methods: {
      // 切换分类
      SelectType(index) {
          this.active = index
          this.typeid = this.Type[index].id

          this.$router.push({
          path: '/product/product/type',
          query: {
            typeid: this.typeid
          }
        })


      },
      async ProductData() {
        var result = await this.$api.ProductIndex()
        console.log(result.data)

        this.Recommend = result.data.Recommend
        this.Type = result.data.Type
        this.Hot = result.data.Hot
        this.News = result.data.News
        this.logo = result.data.logo
      }
    },
  }
</script>

<style>
  ul.proul li .con {
    padding: 0px;
  }
</style>